<template>
  <op-dialog ref="dialogRef" @confirm="confirm" destroy-on-close>
    <div class="dialogWrap">
      <el-form label-position="top" label-suffix=":">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="Name">
              <el-select
                v-model="formData.teamworkUser"
                v-if="isGeneral"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in teamworkUserList"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                />
              </el-select>
              <op-tree-transfer
                v-model="singleValue"
                singleCheck
                selectType="3"
                requestUrl="/loanTotal/getAllUserList"
                nodeKey="frontId"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Type">
              <el-select
                v-model="formData.type"
                placeholder=""
                :style="{ width: '100%', height: '32px' }"
              >
                <el-option
                  v-for="item in selectData"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="Cc">
          <op-tree-transfer
            v-model="multipleValue"
            selectType="3"
            requestUrl="/loanTotal/getAllUserList"
            nodeKey="frontId"
          />
        </el-form-item>
        <el-form-item label="Remark">
          <el-input type="textarea" :rows="5" resize="none" v-model="formData.description" />
        </el-form-item>
      </el-form>
    </div>
  </op-dialog>
</template>
<script setup>
import { apiMethods } from '@/utils/http.js';
import { ElMessage, ElLoading } from 'element-plus';
const props = defineProps({
  recid: {
    type: String,
    default: '',
  },
  // 区分表单提交时所请求的接口
  confirmApi: {
    type: String,
  },
  // general-payment,在财务加签转发中，加签对象约束为仅财务部门
  // isGeneral: {
  //   type: Boolean,
  //   default: false,
  // },
});

const emit = defineEmits(['success']);

const fatherMethod = inject('fatherMethod', () => {});
const isGeneral = inject('isGeneral', '');

const singleValue = ref();
const multipleValue = ref();

const formData = ref({
  recid: props.recid,
  teamworkUser: '',
  userIds: '',
  type: '',
  description: '',
});

const teamworkUserList = ref([]);
const selectData = [
  { id: 1, label: 'Countersign' },
  { id: 2, label: 'Forward' },
];

// ref
const dialogRef = ref();

const init = () => {
  dialogRef.value.init();
};

const confirm = prop => {
  submit();
};

const submit = async () => {
  // 校验
  if (singleValue.value?.length === 0 && formData.value.type) {
    ElMessage.error('Name is required!');
    return;
  }

  if (singleValue.value?.length > 0 && formData.value.type === '') {
    ElMessage.error('Type is required!');
    return;
  }

  if (singleValue.value?.length === 0 && multipleValue.value?.length === 0) {
    ElMessage({ message: 'Nothing to submit!', type: 'error' });
    return;
  }

  // 处理参数
  if (singleValue.value?.length > 0 && formData.value.type !== '') {
    formData.value.teamworkUser = singleValue.value[0];
  }
  let arr = [];
  if (multipleValue.value?.length > 0) {
    multipleValue.value.forEach(item => arr.push(item));
  }
  formData.value.userIds = arr.join(',');
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
  });

  apiMethods
    .post(props.confirmApi, { ...formData.value })
    .then(res => {
      loading.close();
      if (res.data.code || res.data.errorCode === '200') {
        ElMessage.success(res.data.msg);
        emit('success');
        dialogRef.value.destroy();
      } else {
        ElMessage.error(res.data.msg);
      }
    })
    .catch(error => {
      console.log(error);
      loading.close();
    });
};

defineExpose({ init });
</script>
<style lang="scss" scoped></style>
